<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
  <script src="/static/js/auth.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
    }
    .navbar {
      background-color: #2c3e50;
      color: white;
      padding: 12px 20px;
      font-size: 18px;
      font-weight: 500;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .container {
      display: flex;
      min-height: calc(100vh - 52px);
    }
    .sidebar {
      width: 250px;
      background-color: #f8f9fa;
      padding: 20px;
      border-right: 1px solid #e9ecef;
    }
    .user-info {
      text-align: center;
      padding: 20px 0;
    }
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 15px;
    }
    .user-name {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 5px;
    }
    .user-regtime {
      font-size: 14px;
      color: #6c757d;
    }
    .main-content {
      flex: 1;
      padding: 20px;
      background-color: #fafafa;
    }
    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e9ecef;
    }
    .content-title {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
    }
    .upload-btn {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      font-weight: 500;
      transition: background-color 0.3s;
    }
    .upload-btn:hover {
      background-color: #218838;
    }
    .file-table {
      width: 100%;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border-collapse: collapse;
    }
    .file-table th {
      background-color: #f8f9fa;
      color: #495057;
      font-weight: 600;
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #e9ecef;
    }
    .file-table td {
      padding: 12px 15px;
      border-bottom: 1px solid #e9ecef;
    }
    .file-table tr:hover {
      background-color: #f8f9fa;
    }
    .download-btn {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 14px;
      transition: background-color 0.3s;
    }
    .download-btn:hover {
      background-color: #0069d9;
    }
  </style>
</head>
<body>
  <div class="navbar">云盘主页</div>
  <div class="container">
    <div class="sidebar">
      <div class="user-info">
        <img class="avatar" src="/static/img/avatar.jpeg">
        <div class="user-name" id="username"></div>
        <div class="user-regtime" id="regtime"></div>
      </div>
    </div>
    <div class="main-content">
      <div class="content-header">
        <div class="content-title">文件列表</div>
        <button class="upload-btn" onclick="toUploadFile()">上传文件</button>
      </div>
      <table class="file-table" id="filetbl">
        <thead>
          <tr>
            <th>文件哈希</th>
            <th>文件名</th>
            <th>文件大小</th>
            <th>上传时间</th>
            <th>最后修改</th>
            <th>操作</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</body>
<script lang="javascript">
  window.onload = function () {
    var username = document.getElementById('username');
    $.ajax({
      url: "/user/info?" + queryParams(),
      type: "GET",
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + errorThrown);
        } else {
          alert(textStatus);
        }
      },
      success: function (body, textStatus, jqXHR) {
        var resp = JSON.parse(body);
        document.getElementById("username").innerHTML = resp.data.Username;
        document.getElementById("regtime").innerHTML = "注册时间： " + resp.data.SignupAt;
        updateFileList();
      }
    });
  }

  function updateFileList() {
    $.ajax({
      url: "/file/query?" + queryParams(),
      type: "POST",
      data: {
        limit: 15
      },
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + errorThrown);
        } else {
          alert(textStatus);
        }
      },
      success: function (body, textStatus, jqXHR) {
        if (!body) return;
        var data = JSON.parse(body);
        if (!data || data.length <= 0) return;

        for (var i = 0; i < data.length; i++) {
          var x = document.getElementById('filetbl').insertRow();
          var cell = x.insertCell();
          cell.innerHTML = data[i].FileHash.substr(0, 20) + "...";

          cell = x.insertCell();
          cell.innerHTML = data[i].FileName;

          cell = x.insertCell();
          cell.innerHTML = data[i].FileSize;

          cell = x.insertCell();
          cell.innerHTML = data[i].UploadAt;

          cell = x.insertCell();
          cell.innerHTML = data[i].LastUpdated;

          cell = x.insertCell();
          cell.innerHTML = '<button class="download-btn" ' +
            'onClick = "downloadFile(\'/file/download' +
            '?filename=' + data[i].FileName + '&filehash=' + data[i].FileHash + '&' + queryParams() + '\')">下载</button>';
        }
      }
    });
  }

  function toUploadFile() {
    window.location.href = '/file/upload?' + queryParams();
  }

  function downloadFile(durl) {
    $.ajax({
      url: durl,
      type: "GET",
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + errorThrown);
        } else {
          alert(textStatus);
        }
      },
      success: function (body, textStatus, jqXHR) {
        try {
          alert("下载地址：\n" + body);
          var elemIF = document.createElement("iframe");
          elemIF.src = body;
          elemIF.style.display = "none";
          document.body.appendChild(elemIF);
        } catch (e) {
          alert(e);
        }
      }
    });
  }
</script>
</html>